<template>
  <div class="home">
    <!-- 轮播图 -->
    <el-carousel height="400px" class="banner">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <div class="banner-item" :style="{ 
          backgroundImage: item.image ? `url(${item.image})` : 'none',
          backgroundColor: item.backgroundColor 
        }">
          <div class="banner-content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
            <el-button type="primary" size="large" @click="goToProducts">
              立即购物
            </el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 推荐商品 -->
    <div class="section">
      <div class="section-header">
        <h2>热门推荐</h2>
        <el-button text @click="goToProducts">查看更多</el-button>
      </div>
      
      <el-row :gutter="20">
        <el-col :span="6" v-for="product in recommendedProducts" :key="product.id">
          <el-card class="product-card" @click="goToProductDetail(product.id)">
            <div class="product-badge" v-if="product.recommended">推荐</div>
            <img :src="product.imageUrl || '/images/default-product.jpg'" class="product-image" />
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price">
                <span class="price">¥{{ product.price }}</span>
                <span class="points">+{{ product.productPoints }}积分</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 会员等级介绍 -->
    <div class="section">
      <div class="section-header">
        <h2>会员等级</h2>
      </div>
      
      <el-row :gutter="20">
        <el-col :span="8" v-for="level in memberLevels" :key="level.name">
          <el-card class="level-card">
            <div class="level-icon">
              <el-icon :size="48" :color="level.color">
                <component :is="level.icon" />
              </el-icon>
            </div>
            <h3>{{ level.name }}</h3>
            <p>{{ level.description }}</p>
            <ul class="level-benefits">
              <li v-for="benefit in level.benefits" :key="benefit">{{ benefit }}</li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getRecommendedProducts } from '@/api/product'
import { banner1, banner2, banner3 } from '@/assets/images'

const router = useRouter()

// 轮播图数据
const banners = ref([
  {
    id: 1,
    title: '精选好物',
    description: '发现更多优质商品',
    image: banner1,
    backgroundColor: '#409eff'
  },
  {
    id: 2,
    title: '会员专享',
    description: '会员专享优惠活动',
    image: banner2,
    backgroundColor: '#67c23a'
  },
  {
    id: 3,
    title: '限时特价',
    description: '限时特价，先到先得',
    image: banner3,
    backgroundColor: '#e6a23c'
  }
])

// 推荐商品
const recommendedProducts = ref([])

// 会员等级
const memberLevels = ref([
  {
    name: '普通会员',
    description: '基础会员权益',
    icon: 'User',
    color: '#909399',
    benefits: ['基础购物权益', '积分累积', '客服支持']
  },
  {
    name: '黄金会员',
    description: '享受更多优惠',
    icon: 'Star',
    color: '#e6a23c',
    benefits: ['9.5折优惠', '免费配送', '专属客服', '生日特权']
  },
  {
    name: '钻石会员',
    description: '尊享VIP服务',
    icon: 'Trophy',
    color: '#409eff',
    benefits: ['9折优惠', '免费配送', '专属客服', '生日特权', '管理权限']
  }
])

// 获取推荐商品
const loadRecommendedProducts = async () => {
  try {
    const response = await getRecommendedProducts()
    if (response.code === 200) {
      recommendedProducts.value = response.data.slice(0, 4)
    }
  } catch (error) {
    console.error('获取推荐商品失败:', error)
  }
}

// 跳转到商品列表
const goToProducts = () => {
  router.push('/products')
}

// 跳转到商品详情
const goToProductDetail = (id) => {
  router.push(`/products/${id}`)
}

onMounted(() => {
  loadRecommendedProducts()
})
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.banner {
  margin-bottom: 40px;
  border-radius: 8px;
  overflow: hidden;
}

.banner-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.banner-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.banner-content {
  text-align: center;
  color: white;
  z-index: 1;
  position: relative;
}

.banner-content h2 {
  font-size: 48px;
  margin-bottom: 16px;
  font-weight: bold;
}

.banner-content p {
  font-size: 20px;
  margin-bottom: 24px;
  opacity: 0.9;
}

.section {
  margin-bottom: 60px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 28px;
  color: #303133;
  margin: 0;
}

.product-card {
  cursor: pointer;
  transition: all 0.3s;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.product-info {
  padding: 16px 0 0;
}

.product-info h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-desc {
  color: #909399;
  font-size: 14px;
  margin: 0 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.points {
  color: #409eff;
  font-size: 12px;
  background: #f0f9ff;
  padding: 2px 6px;
  border-radius: 4px;
}

.level-card {
  text-align: center;
  height: 100%;
  transition: all 0.3s;
}

.level-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.level-icon {
  margin-bottom: 16px;
}

.level-card h3 {
  margin: 0 0 8px;
  color: #303133;
}

.level-card p {
  color: #909399;
  margin: 0 0 16px;
}

.level-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.level-benefits li {
  padding: 4px 0;
  color: #606266;
  position: relative;
  padding-left: 16px;
}

.level-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #67c23a;
  font-weight: bold;
}
</style> 